<template>
	<view class="">
		<view class="topBtn f f-a-c f-j-b p-20">
			<view class="left">
				<image src="/static/home/sceh.png" class="scheImg" mode=""></image>
				<input type="text" v-model="value" @input="input" @confirm="givMi" placeholder="请输入孩子名称进行搜索" class="inp"
					name="" id="">
			</view>
			<view @click="qieInd" class="right f f-a-c">
				<view class="timeDos">
					时间
				</view>
				<view class="f f-a-c f-d-c m-l-10">
					<image src="/static/topShow.png" class="top tops" v-if="ind==1" mode=""></image>
					<image src="/static/top.png" class="top tops" v-else mode=""></image>
					<image src="/static/botShow.png" class="top " v-if="ind==2" mode=""></image>
					<image src="/static/bot.png" class="top " v-else mode=""></image>
				</view>
			</view>
		</view>
		<view class="body p-20 f f-a-c f-w-w">
			<view v-for="(item,index) in list" :key="index" class="item b-r-20 b-f p-15">
				<view class="topItem">
					<image :src="item.examination.cover" class="img" mode="aspectFit"></image>
				</view>
				<view class="name">
					{{item.examination.name}}
				</view>
				<view class="cenTou f f-a-c ">
					<image :src="item.user.avatar" class="avaer" mode=""></image>
					<view class="time">
						<view class="">
							{{item.user.nickname}}
						</view>
						<view class="">
							<!-- 通关时间: {{item.duration}}s -->
							通关时间: {{timeFn(item.duration)}}
						</view>
					</view>
				</view>
				<view @click="customs(item)" class="examine">
					查看
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				page: 1,
				total: '',
				ind: 1,
				list: []
			}
		},
		onLoad() {
			this.page = 1
			this.list = []
			this.initList()
		},
		onReachBottom() {
			if (this.list.length == this.total) return
			this.page++
			this.initList()
			console.log('123456');
		},
		methods: {
			input(e) {
				console.log(e, '+9999999');
				if (e.detail.value == '') {
					setTimeout(() => {
						this.list = []
						this.page = 1
						this.initList()
					}, 500)
				}
			},
			qieInd() {
				if (this.ind == 1) {
					this.ind = 2
					this.list = []
					this.page = 1
					this.initList()
				} else {
					this.ind = 1
					this.list = []
					this.page = 1
					this.initList()
				}

			},
			// 时间
			timeFn(seconds) {
				// let seconds = 80
				var minutes = Math.floor(seconds / 60); // 使用除法获取分钟数
				var remainingSeconds = seconds % 60; // 获取剩余的秒数
				console.log(minutes, remainingSeconds, '88888888888888');
				// 返回分钟和秒数的对象
				if (minutes == 0) {
					return remainingSeconds + 's'
				}
				return minutes + 'min' + remainingSeconds + 's'
			},
			async initList() {
				let n = await this.$api.ExaminationsRecord({
					page: this.page,
					direction: this.ind == 1 ? 'asc' : 'desc',
					q: this.value
				})
				this.total = n.data.total
				this.list = [...this.list, ...n.data.data]
			},
			givMi() {
				this.list = []
				this.page = 1
				this.initList()
			},
			// 跳转到记录
			customs(item) {
				console.log(item, '888888888');
				let list = JSON.stringify(item.levels)
				// return
				uni.navigateTo({
					url: `/pageB/ViewRecord?id=${item.id}&list=` + list
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.timeDos {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #1a1a1a;
	}

	.top {
		width: 20rpx;
		height: 12rpx;
	}

	.tops {
		width: 20rpx;
		height: 12rpx;
		margin-bottom: 4rpx;
	}

	.topBtn {
		height: 96rpx;
		width: 100%;
		background-color: #fff;

		.left {
			position: relative;
			width: 78%;
			height: 70rpx;

			.scheImg {
				position: absolute;
				width: 24rpx;
				height: 26rpx;
				top: 50%;
				transform: translateY(-50%);
				left: 20rpx;
			}

			.inp {
				width: 100%;
				height: 72rpx;
				background: #f6f6f6;
				border-radius: 36rpx;
				padding-left: 55rpx;
			}
		}
	}

	.examine {
		width: 100%;
		height: 64rpx;
		line-height: 64rpx;
		border: 2rpx solid #009d85;
		border-radius: 34rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #009d85;
	}

	.cenTou {
		margin: 10rpx 0;
		margin-bottom: 20rpx;

		.avaer {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			margin-right: 15rpx;
		}

		.time {
			font-size: 26rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			color: #666666;
		}
	}

	.item {
		margin-bottom: 25rpx;
		width: 48%;
		margin-right: 2%;
		padding-bottom: 30rpx;

		:nth-child(2n) {
			margin-right: 0;
		}
	}

	.name {
		margin: 10rpx 0;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		color: #1a1a1a;
	}

	.topItem {
		width: 100%;
		height: 300rpx;
		background: #f6f6f6;

		.img {
			width: 90%;
			height: 90%;
			margin-top: 47%;
			margin-left: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>